<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
<style>
    .image-upload {
        display: inline-block;
        width: 100px !important;
        height: 100px;
        cursor: pointer;
        border: 1px dotted #ccc;
        background-size: 100% 100%;
        background-image: url(/static/image/upload.png);
        margin-right: 10px;
    }
    .image-upload button,.identity-z button,.identity-f button {
        width: 100px;
        height: 100px;
        position: relative;
        top: 0px;
        opacity: 1;
        cursor: pointer;
    }
    .x-admin-sm .image-upload .layui-btn:hover{
        opacity: 0;
    }
    #LAY_layedit_1 img {
        width: 100px !important;
    }
    .goods_img_ele {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        display: inline-block;
        background-color: rebeccapurple;
    }
    .goods_img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .delete {
        position: absolute;
        top: 0;
        width: 100px;
        height: 100px;
        /*opacity: 0.8;*/
        background:url(/static/image/delete.png) no-repeat center;
        background-size: 35% 35%;
        /*background-color: #0000000;*/
    }
    .layui-border-box, .layui-border-box {
        display: flex;
    }
    .layui-transfer-active {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .layui-transfer-data {
        height: 80%;
        overflow-y: scroll;
        overflow-x: scroll;
    }

    .list-left {
        width: 45%;
        height: 410px;
        overflow-y: scroll;
    }
    .list-right {
        width: 45%;
        height: 410px;
        overflow-y: scroll;
    }
    .btn-conta {
        width: 30px;
        height: 410px;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    .btn-left {
        width: 100%;
        height: 30px;
        background-color: #009688;
        text-align: center;
        line-height:30px;
        margin-top: 10px;
        color: #ffffff;
    }
    .btn-right{
        width: 100%;
        height: 30px;
        background-color: #009688;
        text-align: center;
        line-height:30px;
        margin-bottom: 10px;
        color: #ffffff;
    }
</style>
@section('content')
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="cate_name" class="layui-form-label">
                    <span class="x-red">*</span>策略条件
                </label>
                <div class="layui-input-inline" style="width: 800px;line-height: 36px;">
                    购买任意商品&nbsp;
                    <input type="text" name="goods_number" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="数量" style="width: 100px;display: inline-block" value="{{$data['goods_number']}}">
                    &nbsp;瓶，&nbsp;赠送下列指定商品
                </div>
            </div>
            <div class="layui-form-item">
                <label for="goods_unit" class="layui-form-label"></label>
                <div style="width: 930px;display: flex;">
                    <div style="width: 45%;margin-right: 5%">商品列表：</div>
                    <div style="width: 30px;"></div>
                    <div style="width: 45%;">赠送商品：</div>
                </div>
                <div class="layui-input-inline" style="width: 930px;display: flex;margin-top: 10px">
                    <div class="list-left">
                        <table class="layui-table" lay-skin="line" style="table-layout:fixed">
                            <colgroup>
                                <col width="10">
                                <col width="50">
                                <col width="20">
                                <col width="20">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" lay-filter="checkall-left" name="" lay-skin="primary">
                                </th>
                                <th>名称</th>
                                <th>价格</th>
                                <th>库存</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($goods as $item)
                            <tr>
                                <td>
                                    <input type="checkbox" name="goods" value="{{$item['id']}}" lay-skin="primary">
                                </td>
                                <td>{{$item['goods_name']}}</td>
                                <td>{{$item['goods_price']}}</td>
                                <td>{{$item['goods_sale_num']}}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="btn-conta">
                        <div class="btn-right"> > </div>
                        <div class="btn-left"> < </div>
                    </div>
                    <div class="list-right">
                        <table class="layui-table" lay-skin="line" style="table-layout:fixed">
                            <colgroup>
                                <col width="10">
                                <col width="50">
                                <col width="20">
                                <col width="20">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" lay-filter="checkall-right" name="" lay-skin="primary">
                                </th>
                                <th>名称</th>
                                <th>价格</th>
                                <th>数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($send as $it)
                                <tr>
                                    <td>
                                        <input type="checkbox" name="goods" value="{{$it['id']}}" lay-skin="primary">
                                    </td>
                                    <td>{{$it['goods_name']}}</td>
                                    <td>{{$it['goods_price']}}</td>
                                    <td>
                                        <input type="text" name="right-number" id="{{$it['id']}}" style="width: 30px" value="{{$it['number']}}">
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="cate_name" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">编辑</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['laydate', 'form', 'layer'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            // 监听全选
            form.on('checkbox(checkall-left)', function(data){
                if(data.elem.checked){
                    $('.list-left tbody input').prop('checked',true);
                }else{
                    $('.list-left tbody input').prop('checked',false);
                }
                form.render('checkbox');
            });

            // 监听全选
            form.on('checkbox(checkall-right)', function(data){
                if(data.elem.checked){
                    $('.list-right tbody input').prop('checked',true);
                }else{
                    $('.list-right tbody input').prop('checked',false);
                }
                form.render('checkbox');
            });

            // ready获取事件
            list = [];
            left_ids = [];
            right_ids = [];
            left_value = [];
            right_value = [];
            $(document).ready(function() {
                $.ajax({
                    type: 'POST',
                    url: '/admin/sales/defaultStrategyInfo/ajax',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function (data) {
                        list = data.data.list;
                        data.data.left.forEach(function(val){
                            left_ids.push(val.id);
                        });
                        data.data.right.forEach(function(val){
                            right_ids.push(val.id);
                        });
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!')
                    }
                });
            });

            $(".btn-right").click(function () {
                $(".list-left tbody input:checkbox[name='goods']:checked").each(function() {
                    id = parseInt($(this).val());
                    right_ids.push(id);
                    local = $.inArray(id, left_ids);     // 根据元素值查找下标，不存在返回-1
                    left_ids.splice(local,1);            // 根据下标删除一个元素   1表示删除一个元素
                });

                left_ids.sort(function(a,b){
                    return b-a;
                });
                right_ids.sort(function(a,b){
                    return b-a;
                });

                right_value = [];
                right_ids.forEach(function(r) {
                    list.forEach(function(l){
                        if (l.id == r) {
                            right_value.push(l);
                        }
                    });
                });

                left_value = [];
                left_ids.forEach(function(le) {
                    list.forEach(function(li){
                        if (li.id == le) {
                            left_value.push(li);
                        }
                    });
                });

                right_html = '<tbody>';
                right_value.forEach(function(rig) {
                    right_html = right_html + '<tr>' +
                        '<td>' +
                        '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                        '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                        '</td>' +
                        '<td>' + rig.goods_name + '</td>' +
                        '<td>' + rig.goods_price + '</td>' +
                        '<td><input type="text" name="right-number" id="' + rig.id + '" style="width: 30px" value="1"></td></tr>';
                });
                right_html = right_html + '</tbody>';
                $(".list-right tbody").remove();
                $(".list-right thead").after(right_html);

                left_html = '<tbody>';
                left_value.forEach(function(rig) {
                    left_html = left_html + '<tr>' +
                        '<td>' +
                        '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                        '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                        '</td>' +
                        '<td>' + rig.goods_name + '</td>' +
                        '<td>' + rig.goods_price + '</td>' +
                        '<td>' + rig.goods_sale_num + '</td></tr>';
                });
                left_html = left_html + '</tbody>';
                $(".list-left tbody").remove();
                $(".list-left thead").after(left_html);

                form.render();
            });

            $(".btn-left").click(function () {
                $(".list-right tbody input:checkbox[name='goods']:checked").each(function(){
                    id = parseInt($(this).val());
                    left_ids.push(id);
                    local = $.inArray(id, right_ids);     // 根据元素值查找下标，不存在返回-1
                    right_ids.splice(local,1);            // 根据下标删除一个元素   1表示删除一个元素
                });

                left_ids.sort(function(a,b){
                    return b-a;
                });
                right_ids.sort(function(a,b){
                    return b-a;;
                });

                right_value = [];
                right_ids.forEach(function(r) {
                    list.forEach(function(l){
                        if (l.id == r) {
                            right_value.push(l);
                        }
                    });
                });

                left_value = [];
                left_ids.forEach(function(le) {
                    list.forEach(function(li){
                        if (li.id == le) {
                            left_value.push(li);
                        }
                    });
                });

                right_html = '<tbody>';
                right_value.forEach(function(rig) {
                    right_html = right_html + '<tr>' +
                        '<td>' +
                        '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                        '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                        '</td>' +
                        '<td>' + rig.goods_name + '</td>' +
                        '<td>' + rig.goods_price + '</td>' +
                        '<td><input type="text" name="right-number" id="' + rig.id + '" style="width: 30px" value="1"></td></tr>';
                });
                right_html = right_html + '</tbody>';
                $(".list-right tbody").remove();
                $(".list-right thead").after(right_html);

                left_html = '<tbody>';
                left_value.forEach(function(rig) {
                    left_html = left_html + '<tr>' +
                        '<td>' +
                        '<input type="checkbox" name="goods" value="' + rig.id + '" lay-skin="primary">' +
                        '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                        '</td>' +
                        '<td>' + rig.goods_name + '</td>' +
                        '<td>' + rig.goods_price + '</td>' +
                        '<td>' + rig.goods_sale_num + '</td></tr>';
                });
                left_html = left_html + '</tbody>';
                $(".list-left tbody").remove();
                $(".list-left thead").after(left_html);

                form.render();
            });

            //监听提交
            form.on('submit(add)',
                function(data) {
                    send_goods = [];
                    $(".list-right input[name='right-number']").each(function(){
                        person = {};
                        person.id = $(this)[0].id;
                        person.number = $(this).val()
                        send_goods.push(person);
                    });
                    data.field.send_goods = send_goods;
                    if (data.field.send_goods.length == 0) {
                        layer.msg('请选择赠送商品',{icon:7,time:2000});
                        return false;
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/admin/sales/defaultStrategyAdd',
                        data: data.field,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                layer.alert("编辑成功", {
                                        icon: 6,
                                        closeBtn: false
                                    },
                                    function() {
                                        //关闭当前frame
                                        xadmin.close();
                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.alert(data.msg)
                            }
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!')
                        }
                    });
                    return false;
                });
            });
</script>

@endsection
